#app {
  margin: 0 auto;
  padding: 0 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body {
  margin: 0;
}
@media (hover: hover) {
  a:hover {
  }
}

@media (min-width: 1024px) {
  body {
  }

  #app {
  }
}
.__container-wrapper {
  position: fixed;
  height: 100vh;
}
@side-width: 320px;
@tree-icon-size: 1.18em;
@tree-toolbar-width: 32px;
@tree-font-size: 1.12em;
@table-font-size: 1.1em;
@table-status-icon-size: 1.14em;
@bottom-bar-height: 28px;

@primary-color: #1da57a;
@body-background: #fff;
//控制台终端样式
@console-background: #263238;
@console-color: seashell;
@console-font-family: Monospace Terminal Arial, serif;

@scrollbar-size: 6px;

//运行状态
@status-running-color: #52c41a;
@status-starting-color: @primary-color;
@status-stopping-color: #d4380d;
@status-stopped-color: #C16666;

@bar-icon-size: 18px;
@code-editor-font-size: 1.16em;

.tool-button-icon {
  color: var(--el-color-primary);
}
.tool-button-red-icon {
  color: var(--el-color-error);
}
.tool-button-console-icon {
  color: rgba(0, 0, 0, 0.9);
}
.code-editor {
  font-size: @code-editor-font-size;
}
.common-bar {
  background: var(--toolbar-bg-color);
  border: var(--el-border);
  overflow: hidden;
}
.tool-button {
  &:hover {
    background: var(--tool-button-hover-color);
    cursor: pointer;
  }
  &:disabled, &.disabled, :disabled, .disabled {
    background-color: inherit;
    cursor: not-allowed;
    opacity: 0.5;
  }
}
.command-prefix {
  color: lightgray;
  margin: 0 10px 0 2px;
  .textNoSelect();
}
//文本选择禁用
.textNoSelect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}

//全局滚动条样式
*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : @scrollbar-size;
  height: @scrollbar-size;
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
}
*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : rgb(0 0 0 / 25%);
}

.ui-spin {
  animation: span-frame1 3s infinite linear;
}

@keyframes span-frame1
{
  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}
}

@keyframes span-frame2
{
  from {transform: rotate(0deg);}
  to {transform: rotate(-359deg);}
}
.ui-blink {
  animation: blink 800ms infinite;
}
//闪烁
@keyframes blink {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes blink {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}